<template>
  <div>
    <table>
      <Child v-for="item in items" @click="onRowClick(item)">
      </Child>
    </table>
    <Modal v-if="activeItem" :item="activeItem" @onClose="onModalClose" />
  </div>
</template>
<script>
import Child from './Child.vue';
import Modal from './Modal.vue';

export default {
  props: ["items"],
  components: {
    Modal
  },
  data() {
    return {
      activeItem: null
    }
  },
  methods: {
    onRowClick(item) {
      this.activeItem = item
    },
    onModalClose() {
      this.activeItem = null
    }
  }

}//https://stackoverflow.com/questions/59073808/how-to-access-child-components-reactive-data-in-a-slot
</script>
<style lang="">

</style>